import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Modal,
  Dimensions,
  Image,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import QRCode from 'react-native-qrcode-svg';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Picker } from '@react-native-picker/picker';

const { width } = Dimensions.get('window');

const QRDepositScreen = ({ navigation }) => {
  const [selectedCoin, setSelectedCoin] = useState('BTC');
  const [showCoinPicker, setShowCoinPicker] = useState(false);
  const [showQRModal, setShowQRModal] = useState(false);
  const [copiedAddress, setCopiedAddress] = useState(false);
  
  const coins = [
    { symbol: 'BTC', name: 'Bitcoin', address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa' },
    { symbol: 'ETH', name: 'Ethereum', address: '0x742d35Cc6634C0532925a3b844Bc9e7595f6E123' },
    { symbol: 'USDT', name: 'Tether', address: '0x742d35Cc6634C0532925a3b844Bc9e7595f6E124' },
    { symbol: 'BNB', name: 'Binance Coin', address: 'bnb1v8vkkymvhe2pk7yy7wm8uzq9z8w7w8uzq9z8w7' },
  ];

  const currentCoin = coins.find(coin => coin.symbol === selectedCoin);

  const handleCopyAddress = () => {
    setCopiedAddress(true);
    setTimeout(() => setCopiedAddress(false), 2000);
  };

  const handleShareQR = () => {
    setShowQRModal(true);
  };

  return (
    <LinearGradient colors={['#1a1a2e', '#16213e']} style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Icon name="arrow-back" size={24} color="#fff" />
          </TouchableOpacity>
          <Text style={styles.title}>二维码存款</Text>
          <TouchableOpacity onPress={() => navigation.navigate('History')}>
            <Icon name="history" size={24} color="#fff" />
          </TouchableOpacity>
        </View>

        {/* Coin Selection */}
        <TouchableOpacity
          style={styles.coinSelector}
          onPress={() => setShowCoinPicker(true)}
        >
          <View style={styles.coinInfo}>
            <Text style={styles.coinSymbol}>{currentCoin.symbol}</Text>
            <Text style={styles.coinName}>{currentCoin.name}</Text>
          </View>
          <Icon name="arrow-drop-down" size={24} color="#fff" />
        </TouchableOpacity>

        {/* QR Code */}
        <View style={styles.qrContainer}>
          <View style={styles.qrWrapper}>
            <QRCode
              value={currentCoin.address}
              size={200}
              color="#000"
              backgroundColor="#fff"
            />
          </View>
          <Text style={styles.qrLabel}>扫描二维码存款</Text>
        </View>

        {/* Address Display */}
        <View style={styles.addressContainer}>
          <Text style={styles.addressLabel}>钱包地址</Text>
          <View style={styles.addressBox}>
            <Text style={styles.addressText} numberOfLines={1}>
              {currentCoin.address}
            </Text>
            <TouchableOpacity onPress={handleCopyAddress}>
              <Icon name={copiedAddress ? "check" : "content-copy"} size={20} color="#4CAF50" />
            </TouchableOpacity>
          </View>
          {copiedAddress && (
            <Text style={styles.copySuccess}>地址已复制到剪贴板</Text>
          )}
        </View>

        {/* Instructions */}
        <View style={styles.instructions}>
          <Text style={styles.instructionsTitle}>存款说明</Text>
          <View style={styles.instructionItem}>
            <Icon name="check-circle" size={16} color="#4CAF50" />
            <Text style={styles.instructionText}>
              仅支持 {currentCoin.symbol} 网络转账
            </Text>
          </View>
          <View style={styles.instructionItem}>
            <Icon name="check-circle" size={16} color="#4CAF50" />
            <Text style={styles.instructionText}>
              最小存款金额: 0.001 {currentCoin.symbol}
            </Text>
          </View>
          <View style={styles.instructionItem}>
            <Icon name="warning" size={16} color="#ff9800" />
            <Text style={styles.instructionText}>
              请勿向此地址发送其他币种
            </Text>
          </View>
        </View>

        {/* Action Buttons */}
        <View style={styles.actionContainer}>
          <TouchableOpacity style={styles.actionButton} onPress={handleShareQR}>
            <Icon name="share" size={20} color="#fff" />
            <Text style={styles.actionButtonText}>分享</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionButton} onPress={handleCopyAddress}>
            <Icon name="content-copy" size={20} color="#fff" />
            <Text style={styles.actionButtonText}>复制地址</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>

      {/* Coin Picker Modal */}
      <Modal
        visible={showCoinPicker}
        transparent
        animationType="slide"
        onRequestClose={() => setShowCoinPicker(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>选择币种</Text>
            {coins.map((coin) => (
              <TouchableOpacity
                key={coin.symbol}
                style={styles.coinOption}
                onPress={() => {
                  setSelectedCoin(coin.symbol);
                  setShowCoinPicker(false);
                }}
              >
                <Text style={styles.coinOptionSymbol}>{coin.symbol}</Text>
                <Text style={styles.coinOptionName}>{coin.name}</Text>
                {selectedCoin === coin.symbol && (
                  <Icon name="check" size={20} color="#4CAF50" />
                )}
              </TouchableOpacity>
            ))}
            <TouchableOpacity
              style={styles.modalClose}
              onPress={() => setShowCoinPicker(false)}
            >
              <Text style={styles.modalCloseText}>取消</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      {/* QR Modal */}
      <Modal
        visible={showQRModal}
        transparent
        animationType="fade"
        onRequestClose={() => setShowQRModal(false)}
      >
        <View style={styles.qrModalContainer}>
          <View style={styles.qrModalContent}>
            <TouchableOpacity
              style={styles.qrModalClose}
              onPress={() => setShowQRModal(false)}
            >
              <Icon name="close" size={24} color="#fff" />
            </TouchableOpacity>
            <Text style={styles.qrModalTitle}>存款二维码</Text>
            <View style={styles.qrModalQR}>
              <QRCode
                value={currentCoin.address}
                size={250}
                color="#000"
                backgroundColor="#fff"
              />
            </View>
            <Text style={styles.qrModalAddress}>{currentCoin.address}</Text>
          </View>
        </View>
      </Modal>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
  },
  coinSelector: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    padding: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 30,
  },
  coinInfo: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  coinSymbol: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    marginRight: 10,
  },
  coinName: {
    fontSize: 14,
    color: '#a0a0a0',
  },
  qrContainer: {
    alignItems: 'center',
    marginBottom: 30,
  },
  qrWrapper: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 15,
    marginBottom: 15,
  },
  qrLabel: {
    color: '#a0a0a0',
    fontSize: 14,
  },
  addressContainer: {
    marginBottom: 30,
  },
  addressLabel: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 10,
  },
  addressBox: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 10,
    padding: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  addressText: {
    flex: 1,
    color: '#fff',
    fontSize: 14,
    marginRight: 10,
  },
  copySuccess: {
    color: '#4CAF50',
    fontSize: 12,
    marginTop: 5,
  },
  instructions: {
    marginBottom: 30,
  },
  instructionsTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 15,
  },
  instructionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  instructionText: {
    color: '#a0a0a0',
    fontSize: 14,
    marginLeft: 10,
  },
  actionContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  actionButton: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    padding: 15,
    alignItems: 'center',
    width: '45%',
  },
  actionButtonText: {
    color: '#fff',
    fontSize: 14,
    marginTop: 5,
  },
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: '#1a1a2e',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 20,
    textAlign: 'center',
  },
  coinOption: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#333',
  },
  coinOptionSymbol: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
    marginRight: 10,
    width: 50,
  },
  coinOptionName: {
    fontSize: 14,
    color: '#a0a0a0',
    flex: 1,
  },
  modalClose: {
    paddingVertical: 15,
    alignItems: 'center',
  },
  modalCloseText: {
    color: '#4CAF50',
    fontSize: 16,
  },
  qrModalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  qrModalContent: {
    backgroundColor: '#1a1a2e',
    borderRadius: 20,
    padding: 30,
    alignItems: 'center',
  },
  qrModalClose: {
    position: 'absolute',
    top: 10,
    right: 10,
  },
  qrModalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 20,
  },
  qrModalQR: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 15,
    marginBottom: 20,
  },
  qrModalAddress: {
    color: '#fff',
    fontSize: 14,
    textAlign: 'center',
  },
});

export default QRDepositScreen;
